<meta charset="UTF-8">
<div id="multi-media">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <Row style="margin:10px;height: 32px;">
        <div class="fl">
            <span>{{$t("reportForm.selectTime")}}:</span>
            <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:300px" placement="bottom-start"></date-picker>
        </div>
        <div style="margin-left: 20px;" class="spans-wrap fl">
            <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(3)" :style="{color: dayNumberType == 3 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.threeDays")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(7)" :style="{color: dayNumberType == 7 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.sevenDays")}}</span>
        </div>
    </Row>
    <Row style="margin:10px;height: 35px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 300px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <ul id="ztree" class="ztree"></ul>
                    </div>
                </transition>
            </div>
        </div>
        <div style="margin-left:20px;" class="fl">
            {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
        </div>
        <div style="margin-left:20px;" class="fl">
            <i-button @click="onClickQuery" icon="ios-search">{{$t("reportForm.query")}}</i-button>
        </div>

        <div style="margin-left:10px;" class="rt">
            <i-button @click="exportTableData" icon="md-exit" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
        <div class="rt">
            <i-button @click="queryAllAddress" icon="ios-search" type="primary">{{$t("reportForm.queryAllAddress")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table :columns="columns" size="small" ref="table" :height="lastTableHeight" :data="tableData" :loading="loading" highlight-row></i-table>
    </div>
    <div style="padding-left:10px;">
        <Page :total="total" show-total @on-change="changePage" :page-size="20" :current="currentIndex" />
    </div>
    <transition name="fade">
        <div v-show="trackDetailModal" class="posi-map-wraper">
            <div class="map-modal" @click="trackDetailModal=false"></div>
            <div class="work-inner-map-wraper">
                <div class="posi-map-title">
                    {{$t("monitor.track")}}
                    <div class="map-close"></div>
                </div>
                <div class="work-details-map" id="work-details-map"></div>
            </div>
        </div>
    </transition>
    <Modal v-model="cameraImgModal" width="500">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-create-outline"></Icon>
            <span>{{$t("monitor.camera")}}</span>
        </p>
        <div style="text-align:center">
            <Row style="margin:10px 0;">
                <i-col span="24">
                    <img v-show="cameraImgUrl" :src="cameraImgUrl" style="width:100%;">
                </i-col>
            </Row>
        </div>
        <div slot="footer" style="text-align:center;">
            <i-button type="primary" style="width: 150px" @click="onClickCameraDownload">{{$t("reportForm.download")}}</i-button>
            <i-button type="error" style="width: 150px" @click="cameraImgModal=false">{{$t("monitor.close")}}</i-button>
        </div>
    </Modal>
</div>